/**
 * 公共属性
 */
 @baseColor: #fe3b91;
 @backgroundColor: #f3f3f3;
 
 [v-cloak] {
     display: none !important;
 }
 
 html,
 body,
 p,
 h1,
 h2,
 h3,
 ul,
 li,
 dl,
 dd {
     margin: 0;
     padding: 0;
     font-family: PingFang SC, PingFangSC-Regular, sans-serif, 'MicrosoftYahei';
 }
 
 li {
     list-style: none;
 }
 
 /*********** flex 布局 ******************/
 .f_flex {
     display: flex;
 }
 
 .f_j_center {
     justify-content: center;
 }
 
 .f_j_end {
     justify-content: flex-end;
 }
 
 .f_j_start {
     justify-content: flex-start;
 }
 
 .f_j_sb {
     justify-content: space-between;
 }
 
 .f_j_sa {
     justify-content: space-around;
 }
 
 .f_a_center {
     align-items: center;
 }
 
 .f_a_c_content {
     align-content: flex-start;
 }
 
 .f_a_start {
     align-items: flex-start;
 }
 
 .f_a_end {
     align-items: flex-end;
 }
 
 .f_wrap {
     flex-wrap: wrap;
 }
 
 .f_center {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .com_border{
     border: 0.5rem solid #4a7d8a;
     border-radius: 1rem;
     box-shadow: 0 0 10px #0099b8 inset;
     background-color: rgba(0, 0, 0, .2);
     padding:3rem;
 }
 .com_border_h5{
     border: 0.5rem solid #4a7d8a;
     border-radius: 1rem;
     box-shadow: 0 0 10px #0099b8 inset;
     background-color: rgba(0, 0, 0, .2);
 }
 
 .flex_row {
     display: flex;
     flex-direction: row;
 }
 
 .flex_col {
     display: flex;
     flex-direction: column;
 }
 
 /*********** flex end ******************/
 // 清除浮动
 .clearfix:before,
 .clearfix:after {
     content: "";
     display: block;
     clear: both;
 }
 
 //2行
 .ellipsis-2 {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     word-break: break-all;
 }
 
 //单行
 .ellipsis-1 {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     word-break: break-all;
 }
 
 .padding_1rem {
     padding: 1rem;
 }
 
 .padding_2rem {
     padding: 2rem;
 }
 
 .padding_3rem {
     padding: 3rem;
 }
 .padding_LR_05rem{
     padding:0 .5rem;
 }
 .padding_LR_1rem{
     padding:0 1rem;
 }
 .padding_LR_2rem{
     padding:0 2rem;
 }
 .padding_BT_05rem{
     padding: .5rem 0;
 }
 .padding_BT_1rem{
     padding: 1rem 0;
 }
 .padding_BT_2rem{
     padding: 2rem 0;
 }
 .padding_10px {
     padding: 10px;
 }
 .padding_20px {
     padding: 20px;
 }
 
 .padding_5px {
     padding: 5px;
 }
 .padding_LR_5px{
     padding:0 5px;
 }
 .padding_LR_10px{
     padding:0 10px;
 }
 .padding_BT_5px{
     padding: 5px 0;
 }
 .padding_BT_10px{
     padding: 10px 0;
 }
 
 .gap_5px {
     gap: 5px;
 }
 
 .gap_10px {
     gap: 10px;
 }
 
 .gap_20px {
     gap: 20px;
 }
 
 .gap_1rem {
     gap: 1rem;
 }
 
 .gap_2rem {
     gap: 2rem;
 }
 
 .gap_3rem {
     gap: 3rem;
 }
 //提示文字
 .tips_txt {
     color: #999;
 }
 // 整体置灰
 .filter_gray{
     filter: grayscale(1);
 }
 .tips_txt_small {
     color: #999;
 }
 
 .cursor_p {
     cursor: pointer;
 }
 
 // 吸顶
 .sticky {
     position: sticky;
     left: 0;
     top: 0;
     z-index: 7;
 }
 
 //启用gpu硬件加速
 .transition3D {
     transform: translate3d(0, 0, 0);
     -webkit-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -webkit-backface-visibility: hidden;
     -webkit-perspective: 1000;
     -moz-backface-visibility: hidden;
     -moz-perspective: 1000;
     backface-visibility: hidden;
     perspective: 1000;
 }
 
 @-webkit-keyframes hzs-scale {
     25% {
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
     }
 
     75% {
         -webkit-transform: scale(0.9);
         transform: scale(0.9);
     }
 }
 
 @keyframes hzs-scale {
     25% {
         -webkit-transform: scale(1.1);
         transform: scale(1.1);
     }
 
     75% {
         -webkit-transform: scale(0.9);
         transform: scale(0.9);
     }
 }
 
 .hzs-scale {
     -webkit-animation-name: hzs-scale;
     animation-name: hzs-scale;
     -webkit-animation-duration: 0.7s;
     animation-duration: 0.7s;
     -webkit-animation-timing-function: ease;
     animation-timing-function: ease;
     -webkit-animation-iteration-count: infinite;
     animation-iteration-count: infinite;
 }
 
 .fill_div {
     width: 100%;
     height: 100%;
 }
 .fill_height{
    height: 100%;
 }
 .no_select{
     user-select: none;
 }
 // 收到的伤害
 .nums {
     position: absolute;
     width: 200px;
     top: 0;
     color: red;
     animation: my_animation 2s;
     animation-fill-mode: forwards;
 }
 .nums_h5 {
     position: absolute;
     width: 20rem;
     top: 0;
     color: red;
     animation: my_animation_h5 2s;
     animation-fill-mode: forwards;
 
 }
 .MaskImg{
     position: absolute;
     width: 10rem;
     top: 0;
     color: red;
     z-index: 0;
     animation: my_MaskImg 2s;
     animation-fill-mode: forwards;
 }
 @keyframes my_MaskImg {
     0% {
         opacity: 1;
     }
 
     50% {
         opacity: .5;
     }
 
     100% {
         opacity: 0;
         display: none;
     }
 }
 @keyframes my_animation {
     0% {
         transform: translateY(-20px);
         opacity: 1;
     }
 
     50% {
         transform: translateY(-40px);
         opacity: .5;
     }
 
     100% {
         transform: translateY(-60px);
         opacity: 0;
         display: none;
 
     }
 }
 @keyframes my_animation_h5 {
     0% {
         transform: translateY(0);
         opacity: 1;
     }
 
     50% {
         transform: translateY(-2rem);
         opacity: .5;
     }
 
     100% {
         transform: translateY(-4rem);
         opacity: 0;
         display: none;
     }
 }
 .img_contain{
     object-fit: contain;
 }
 
 // 不受flex 缩放印象
 .flex_shrink {
     flex-shrink: 0;
 }
 .flex_1{
     flex:1;
 }
 .flow_hidden {
     overflow: hidden;
 }
 
 .flow_auto {
     overflow: auto;
 }
 
 .flow_y_auto {
     overflow-y: auto;
 }
 
 .flow_x_auto {
     overflow-x: auto;
 }
 .hzs_test {
     border: 1px red solid;
 }
 
 .unSelect {
     user-select: none;
 }
 
 .color_info {
     color: #E0E0E0;
 }
 
 .marginTB {
     margin: 1rem 0;
 }
 
 .loading {
     width: 50px;
     aspect-ratio: 1;
     border-radius: 50%;
     background:
         radial-gradient(farthest-side, #2b7d98 94%, #0000) top/8px 8px no-repeat,
         conic-gradient(#0000 30%, #2b7d98);
     -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
     animation: l13 1s infinite linear;
 }
 
 @keyframes l13 {
     100% {
         transform: rotate(1turn)
     }
 }